<template>
  <div>
    <!--学生表格-->
    <div>
      <el-table :data="this.tableData" style="width: 80%" border align="center">
        <el-table-column align="center" prop="ID" label="学号" width="120"></el-table-column>
        <el-table-column align="center" prop="StuName" label="姓名" width="120"></el-table-column>
        <el-table-column align="center" prop="StuAge" label="年龄" width="120"></el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <!--弹出表格-->
            <el-popover placement="right" width="400" trigger="click">
              <!--弹出表格—嵌入表格—-->
              <el-table :data="conData" align="center">
                <el-table-column width="80" property="ID" label="学号"></el-table-column>
                <el-table-column width="80" property="StuName" label="姓名"></el-table-column>
                <el-table-column width="80" property="StuAge" label="年龄"></el-table-column>
                <el-table-column width="100" align="center" label="操作">
                  <template slot-scope="scope">
                    <el-button @click="SeleCou(scope.row)" type="text" size="small">去选课</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!--学生表格按钮-->
              <el-button slot="reference" @click="getOne(scope.row)" size="small">查看当前</el-button>
            </el-popover>
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看已选</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--课表-->
    <div v-if="isShow2">
      <CouTable v-show="isShow2"></CouTable>
    </div>
  </div>

</template>

<script>
  import {getStuList} from '@/api/userApi' //用户请求接口
 // import Text from '../text.vue' //导入弹框组件
  import CouTable from '../CouTable.vue' //导入课表组件
  export default {
    data() {
      return {
        tableData: [],  //定义对象
        conData: [],   //1
        isShow: false,
        isShow2: false,
      }
    },

    //组件注册
    components: {
     // Texts: Text,
      CouTable: CouTable
    },
    methods: {
      handleClick(h) {
        console.log("废弃1")
        this.getOne(B);//再次调用getOne方法，获取最新行数据
        this.isShow = !this.isShow
        this.isShow2 = !this.isShow2

      },
      /*选课*/
      SeleCou(d) {
        console.log("废弃2")
        this.isShow2 = !this.isShow2

      },

      getStu() {
        console.log("废弃3")
        getStuList().then(response => {
          console.log("废弃4")
          const studata = response.data//获取后台响应的原始数据
          this.tableData = studata.data;//从原始数据中获取出学生数据
        })
      },

      getOne(o) {
        console.log("废弃5")
        const data = [{
          ID: o.ID,
          StuName: o.StuName,
          StuAge: o.StuAge
        }]
        this.conData = data;
      },

    },
    mounted: function () {//vue对象创建之后，即刻调用该方法
      this.getStu()//把学生列表数据方式此处，启动vue就能渲染
      console.log("废弃6")
    }
  }

</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
